Εξερευνήστε το experimental_useActionState hook του React για βελτιστοποιημένη διαχείριση κατάστασης ενεργειών, βελτιώνοντας την εμπειρία χρήστη και την απόδοση της εφαρμογής. Δείτε πρακτικά παραδείγματα και βέλτιστες πρακτικές.
Υλοποίηση του experimental_useActionState στο React: Βελτιωμένη Διαχείριση Κατάστασης Ενεργειών
Το React συνεχίζει να εξελίσσεται, εισάγοντας καινοτόμα χαρακτηριστικά που βελτιστοποιούν την ανάπτυξη και βελτιώνουν την απόδοση των εφαρμογών. Ένα τέτοιο χαρακτηριστικό είναι το experimental_useActionState hook. Αυτό το hook, μέρος των πειραματικών API του React, παρέχει έναν πιο κομψό και αποτελεσματικό τρόπο διαχείρισης της κατάστασης που σχετίζεται με ασύγχρονες ενέργειες, ειδικά σε φόρμες ή κατά την αντιμετώπιση μεταλλάξεων από την πλευρά του διακομιστή. Αυτό το άρθρο θα εμβαθύνει στο experimental_useActionState hook, εξερευνώντας τα οφέλη, την υλοποίηση και τις πρακτικές περιπτώσεις χρήσης του με έμφαση στην παγκόσμια εφαρμοσιμότητα.
Κατανόηση της Διαχείρισης Κατάστασης Ενεργειών
Πριν εμβαθύνουμε στις λεπτομέρειες του experimental_useActionState, είναι απαραίτητο να κατανοήσουμε το πρόβλημα που στοχεύει να λύσει. Σε πολλές εφαρμογές React, ειδικά σε αυτές που περιλαμβάνουν φόρμες ή χειρισμό δεδομένων, οι ενέργειες ενεργοποιούν ασύγχρονες λειτουργίες (π.χ., υποβολή μιας φόρμας σε έναν διακομιστή, ενημέρωση μιας βάσης δεδομένων). Η διαχείριση της κατάστασης αυτών των ενεργειών – όπως οι καταστάσεις φόρτωσης, τα μηνύματα σφάλματος και οι ενδείξεις επιτυχίας – μπορεί να γίνει πολύπλοκη και φλύαρη χρησιμοποιώντας παραδοσιακές τεχνικές διαχείρισης κατάστασης (π.χ., useState, Redux, Context API).
Σκεφτείτε το σενάριο ενός χρήστη που υποβάλλει μια φόρμα. Πρέπει να παρακολουθείτε:
- Κατάσταση Φόρτωσης: Για να υποδείξετε ότι η φόρμα επεξεργάζεται.
- Κατάσταση Σφάλματος: Για να εμφανίσετε μηνύματα σφάλματος εάν η υποβολή αποτύχει.
- Κατάσταση Επιτυχίας: Για να παρέχετε ανατροφοδότηση στον χρήστη κατά την επιτυχή υποβολή.
Παραδοσιακά, αυτό μπορεί να περιλαμβάνει πολλαπλά useState hooks και περίπλοκη λογική για την ενημέρωσή τους με βάση το αποτέλεσμα της ασύγχρονης ενέργειας. Αυτή η προσέγγιση μπορεί να οδηγήσει σε κώδικα που είναι δύσκολος στην ανάγνωση, τη συντήρηση και επιρρεπής σε σφάλματα. Το experimental_useActionState hook απλοποιεί αυτή τη διαδικασία ενσωματώνοντας την ενέργεια και τη σχετική της κατάσταση σε μια ενιαία, συνοπτική μονάδα.
Παρουσιάζοντας το experimental_useActionState
Το experimental_useActionState hook παρέχει έναν τρόπο αυτόματης διαχείρισης της κατάστασης μιας ενέργειας, απλοποιώντας τη διαδικασία χειρισμού των καταστάσεων φόρτωσης, των σφαλμάτων και των μηνυμάτων επιτυχίας. Δέχεται μια συνάρτηση ενέργειας ως είσοδο και επιστρέφει έναν πίνακα που περιέχει:
- Την Κατάσταση: Η τρέχουσα κατάσταση της ενέργειας (π.χ.,
null, μήνυμα σφάλματος ή δεδομένα επιτυχίας). - Την Ενέργεια: Μια συνάρτηση που ενεργοποιεί την ενέργεια και ενημερώνει αυτόματα την κατάσταση.
Το hook είναι ιδιαίτερα χρήσιμο για:
- Διαχείριση Φορμών: Διαχείριση των καταστάσεων υποβολής φορμών (φόρτωση, σφάλμα, επιτυχία).
- Μεταλλάξεις από την Πλευρά του Διακομιστή: Χειρισμός ενημερώσεων δεδομένων στον διακομιστή.
- Ασύγχρονες Λειτουργίες: Διαχείριση οποιασδήποτε λειτουργίας που περιλαμβάνει μια promise ή μια ασύγχρονη επανάκληση.
Λεπτομέρειες Υλοποίησης
Η βασική σύνταξη του experimental_useActionState είναι η εξής:
const [state, action] = experimental_useActionState(originalAction);
Όπου το originalAction είναι μια συνάρτηση που εκτελεί την επιθυμητή λειτουργία. Αυτή η συνάρτηση ενέργειας θα πρέπει να σχεδιαστεί ώστε να επιστρέφει είτε μια τιμή (που αντιπροσωπεύει επιτυχία) είτε να προκαλεί ένα σφάλμα (για να αντιπροσωπεύσει αποτυχία). Το React θα ενημερώσει αυτόματα την state με βάση το αποτέλεσμα της ενέργειας.
Πρακτικά Παραδείγματα
Παράδειγμα 1: Βασική Υποβολή Φόρμας
Ας εξετάσουμε ένα απλό παράδειγμα υποβολής φόρμας. Θα δημιουργήσουμε μια φόρμα με ένα μόνο πεδίο εισαγωγής και ένα κουμπί υποβολής. Η υποβολή της φόρμας θα προσομοιώνει την αποστολή δεδομένων σε έναν διακομιστή. Για αυτό το παγκόσμιο πλαίσιο, ας υποθέσουμε ότι ο διακομιστής βρίσκεται σε μια χώρα και ο χρήστης που υποβάλλει τη φόρμα βρίσκεται σε μια άλλη, υπογραμμίζοντας την πιθανότητα καθυστέρησης και την ανάγκη για σαφείς καταστάσεις φόρτωσης.
import React from 'react';
import { experimental_useActionState as useActionState } from 'react';
async function submitForm(data) {
// Προσομοίωση ενός αιτήματος στον διακομιστή με καθυστέρηση
await new Promise(resolve => setTimeout(resolve, 1000));
if (data.name === "error") {
throw new Error("Η υποβολή απέτυχε!");
}
return "Η φόρμα υποβλήθηκε με επιτυχία!";
}
function MyForm() {
const [state, submit] = useActionState(async (prevState, formData) => {
const data = Object.fromEntries(formData);
return submitForm(data);
});
return (
);
}
export default MyForm;
Σε αυτό το παράδειγμα:
- Η συνάρτηση
submitFormπροσομοιώνει ένα αίτημα στον διακομιστή με καθυστέρηση. Προκαλεί ένα σφάλμα εάν η είσοδος είναι "error" για να δείξει τον χειρισμό σφαλμάτων. - Το
useActionStatehook χρησιμοποιείται για τη διαχείριση της κατάστασης της υποβολής της φόρμας. - Η μεταβλητή
stateπεριέχει την τρέχουσα κατάσταση της ενέργειας (nullαρχικά, ένα μήνυμα σφάλματος εάν η υποβολή αποτύχει, ή ένα μήνυμα επιτυχίας εάν η υποβολή πετύχει). - Η συνάρτηση
submitείναι η συνάρτηση ενέργειας που ενεργοποιεί την υποβολή της φόρμας. - Το κουμπί απενεργοποιείται κατά την υποβολή, παρέχοντας οπτική ανατροφοδότηση στον χρήστη.
- Τα μηνύματα σφάλματος και επιτυχίας εμφανίζονται με βάση την
state.
Εξήγηση: Αυτό το παράδειγμα παρουσιάζει μια βασική υποβολή φόρμας. Παρατηρήστε πώς η ιδιότητα `disabled` του κουμπιού και το κείμενο που εμφανίζεται εξαρτώνται από την τρέχουσα `state`. Αυτό παρέχει άμεση ανατροφοδότηση στον χρήστη, ανεξάρτητα από την τοποθεσία του, βελτιώνοντας την εμπειρία χρήστη, ειδικά όταν πρόκειται για διεθνείς χρήστες που ενδέχεται να αντιμετωπίζουν ποικίλες καθυστερήσεις δικτύου. Ο χειρισμός σφαλμάτων παρουσιάζει επίσης ένα σαφές μήνυμα στον χρήστη εάν η υποβολή αποτύχει.
Παράδειγμα 2: Αισιόδοξες Ενημερώσεις (Optimistic Updates)
Οι αισιόδοξες ενημερώσεις περιλαμβάνουν την άμεση ενημέρωση του UI σαν η ενέργεια να είναι επιτυχής, και στη συνέχεια την αναίρεση της ενημέρωσης εάν η ενέργεια αποτύχει. Αυτό μπορεί να βελτιώσει σημαντικά την αντιληπτή απόδοση της εφαρμογής. Ας εξετάσουμε ένα παράδειγμα ενημέρωσης του ονόματος προφίλ ενός χρήστη. Για διεθνείς χρήστες που αλληλεπιδρούν με μια πλατφόρμα που μπορεί να έχει διακομιστές σε μακρινές τοποθεσίες, οι αισιόδοξες ενημερώσεις μπορούν να κάνουν την εμπειρία να φαίνεται πιο αποκριτική.
import React, { useState } from 'react';
import { experimental_useActionState as useActionState } from 'react';
async function updateProfileName(newName) {
// Προσομοίωση ενός αιτήματος στον διακομιστή με καθυστέρηση
await new Promise(resolve => setTimeout(resolve, 1000));
if (newName === "error") {
throw new Error("Η ενημέρωση του ονόματος προφίλ απέτυχε!");
}
return newName;
}
function Profile() {
const [currentName, setCurrentName] = useState("Γιάννης Παπαδόπουλος");
const [state, updateName] = useActionState(async (prevState, formData) => {
const newName = formData.get('newName');
const previousName = currentName;
setCurrentName(newName); // Αισιόδοξη ενημέρωση
try {
const updatedName = await updateProfileName(newName);
return updatedName; // Επιστροφή τιμής για ένδειξη επιτυχίας
} catch (error) {
// Επαναφορά της αισιόδοξης ενημέρωσης σε περίπτωση αποτυχίας (Σημαντικό!)
setCurrentName(previousName);
throw error; // Επαναδημιουργία του σφάλματος για ενημέρωση της κατάστασης
}
});
return (
Τρέχον Όνομα: {currentName}
);
}
export default Profile;
Σε αυτό το παράδειγμα:
- Η συνάρτηση
updateProfileNameπροσομοιώνει την ενημέρωση του ονόματος προφίλ ενός χρήστη σε έναν διακομιστή. - Η μεταβλητή κατάστασης
currentNameαποθηκεύει το τρέχον όνομα του χρήστη. - Το
useActionStatehook διαχειρίζεται την κατάσταση της ενέργειας ενημέρωσης ονόματος. - Πριν από την πραγματοποίηση του αιτήματος στον διακομιστή, το UI ενημερώνεται αισιόδοξα με το νέο όνομα (
setCurrentName(newName)). - Εάν το αίτημα στον διακομιστή αποτύχει, το UI επανέρχεται στο προηγούμενο όνομα (
setCurrentName(prevState)). - Τα μηνύματα σφάλματος και επιτυχίας εμφανίζονται με βάση την
state.
Εξήγηση: Αυτό το παράδειγμα απεικονίζει τις αισιόδοξες ενημερώσεις. Το UI ενημερώνεται αμέσως, κάνοντας την εφαρμογή να φαίνεται πιο αποκριτική. Εάν η ενημέρωση αποτύχει (προσομοιώνεται εισάγοντας "error" ως το νέο όνομα), το UI επανέρχεται, παρέχοντας μια απρόσκοπτη εμπειρία χρήστη. Το κλειδί είναι να αποθηκεύσετε την προηγούμενη κατάσταση και να επιστρέψετε σε αυτήν εάν η ενέργεια αποτύχει. Για χρήστες σε περιοχές με αργές ή αναξιόπιστες συνδέσεις στο διαδίκτυο, οι αισιόδοξες ενημερώσεις μπορούν να βελτιώσουν δραματικά την αντιληπτή απόδοση της εφαρμογής.
Παράδειγμα 3: Μεταφόρτωση Αρχείου
Η μεταφόρτωση αρχείων είναι μια συνηθισμένη ασύγχρονη λειτουργία. Η χρήση του experimental_useActionState μπορεί να απλοποιήσει τη διαχείριση της κατάστασης φόρτωσης, τις ενημερώσεις προόδου και τον χειρισμό σφαλμάτων κατά τη μεταφόρτωση αρχείων. Σκεφτείτε ένα σενάριο όπου χρήστες από διαφορετικές χώρες μεταφορτώνουν αρχεία σε έναν κεντρικό διακομιστή. Το μέγεθος του αρχείου και οι συνθήκες του δικτύου μπορεί να ποικίλλουν σημαντικά, καθιστώντας κρίσιμη την παροχή σαφούς ανατροφοδότησης στον χρήστη.
import React from 'react';
import { experimental_useActionState as useActionState } from 'react';
async function uploadFile(file) {
// Προσομοίωση μεταφόρτωσης αρχείου με ενημερώσεις προόδου
return new Promise((resolve, reject) => {
let progress = 0;
const interval = setInterval(() => {
progress += 10;
// Προσομοίωση πιθανού σφάλματος διακομιστή
if(progress >= 50 && file.name === "error.txt") {
clearInterval(interval);
reject(new Error("Η μεταφόρτωση του αρχείου απέτυχε!"));
return;
}
if (progress >= 100) {
clearInterval(interval);
resolve("Το αρχείο μεταφορτώθηκε με επιτυχία!");
}
// Συνήθως θα αποστέλλατε μια ενημέρωση προόδου εδώ σε ένα πραγματικό σενάριο
}, 100);
});
}
function FileUploader() {
const [state, upload] = useActionState(async (prevState, file) => {
return uploadFile(file);
});
const handleFileChange = (event) => {
const file = event.target.files[0];
upload(file);
};
return (
{state === null ? null : Μεταφόρτωση...
}
{state instanceof Error && Σφάλμα: {state.message}
}
{typeof state === 'string' && {state}
}
);
}
export default FileUploader;
Σε αυτό το παράδειγμα:
- Η συνάρτηση
uploadFileπροσομοιώνει μια μεταφόρτωση αρχείου με ενημερώσεις προόδου (αν και θα χρειαζόταν ένας πραγματικός μηχανισμός ενημέρωσης προόδου σε μια πραγματική υλοποίηση). - Το
useActionStatehook διαχειρίζεται την κατάσταση της ενέργειας μεταφόρτωσης αρχείου. - Το UI εμφανίζει ένα μήνυμα "Μεταφόρτωση..." ενώ το αρχείο μεταφορτώνεται.
- Τα μηνύματα σφάλματος και επιτυχίας εμφανίζονται με βάση την
state.
Εξήγηση:
Ενώ αυτό το απλοποιημένο παράδειγμα δεν περιλαμβάνει πραγματικές ενημερώσεις προόδου, δείχνει πώς το experimental_useActionState μπορεί να διαχειριστεί τη συνολική κατάσταση της μεταφόρτωσης. Σε μια πραγματική εφαρμογή, θα ενσωματώνατε έναν μηχανισμό αναφοράς προόδου μέσα στη συνάρτηση uploadFile και πιθανώς θα ενημερώνατε την κατάσταση με πληροφορίες προόδου. Μια καλή υλοποίηση θα παρείχε επίσης τη δυνατότητα ακύρωσης της λειτουργίας μεταφόρτωσης. Για χρήστες με περιορισμένο εύρος ζώνης, η παροχή προόδου μεταφόρτωσης και μηνυμάτων σφάλματος είναι ζωτικής σημασίας για μια καλή εμπειρία χρήστη.
Οφέλη από τη Χρήση του experimental_useActionState
- Απλοποιημένη Διαχείριση Κατάστασης: Μειώνει τον επαναλαμβανόμενο κώδικα (boilerplate) για τη διαχείριση των καταστάσεων ενεργειών.
- Βελτιωμένη Αναγνωσιμότητα Κώδικα: Κάνει τον κώδικα ευκολότερο στην κατανόηση και τη συντήρηση.
- Βελτιωμένη Εμπειρία Χρήστη: Παρέχει σαφή ανατροφοδότηση στον χρήστη κατά τη διάρκεια ασύγχρονων λειτουργιών.
- Μειωμένα Σφάλματα: Ελαχιστοποιεί τον κίνδυνο σφαλμάτων που σχετίζονται με τη χειροκίνητη διαχείριση κατάστασης.
- Αισιόδοξες Ενημερώσεις: Απλοποιεί την υλοποίηση αισιόδοξων ενημερώσεων για βελτιωμένη απόδοση.
Παρατηρήσεις και Περιορισμοί
- Πειραματικό API: Το
experimental_useActionStatehook είναι μέρος των πειραματικών API του React και υπόκειται σε αλλαγές ή αφαίρεση σε μελλοντικές εκδόσεις. Χρησιμοποιήστε το με προσοχή σε περιβάλλοντα παραγωγής. - Χειρισμός Σφαλμάτων: Βεβαιωθείτε ότι οι συναρτήσεις ενεργειών σας χειρίζονται τα σφάλματα με χάρη, προκαλώντας εξαιρέσεις. Αυτό επιτρέπει στο React να ενημερώνει αυτόματα την κατάσταση με το μήνυμα σφάλματος.
- Ενημερώσεις Κατάστασης: Το
experimental_useActionStatehook ενημερώνει αυτόματα την κατάσταση με βάση το αποτέλεσμα της ενέργειας. Αποφύγετε τη χειροκίνητη ενημέρωση της κατάστασης μέσα στη συνάρτηση ενέργειας.
Βέλτιστες Πρακτικές
- Διατηρήστε τις Ενέργειες Καθαρές (Pure): Βεβαιωθείτε ότι οι συναρτήσεις ενεργειών σας είναι καθαρές συναρτήσεις, που σημαίνει ότι δεν έχουν παρενέργειες (εκτός από την ενημέρωση του UI) και επιστρέφουν πάντα το ίδιο αποτέλεσμα για την ίδια είσοδο.
- Χειριστείτε τα Σφάλματα με Χάρη: Εφαρμόστε στιβαρό χειρισμό σφαλμάτων στις συναρτήσεις ενεργειών σας για να παρέχετε πληροφοριακά μηνύματα σφάλματος στον χρήστη.
- Χρησιμοποιήστε τις Αισιόδοξες Ενημερώσεις με Σύνεση: Οι αισιόδοξες ενημερώσεις μπορούν να βελτιώσουν την εμπειρία του χρήστη, αλλά χρησιμοποιήστε τις με σύνεση σε καταστάσεις όπου η πιθανότητα επιτυχίας είναι υψηλή.
- Παρέχετε Σαφή Ανατροφοδότηση: Παρέχετε σαφή ανατροφοδότηση στον χρήστη κατά τη διάρκεια ασύγχρονων λειτουργιών, όπως καταστάσεις φόρτωσης, ενημερώσεις προόδου και μηνύματα σφάλματος.
- Ελέγξτε Ενδελεχώς: Ελέγξτε τον κώδικά σας ενδελεχώς για να βεβαιωθείτε ότι χειρίζεται όλα τα πιθανά σενάρια, συμπεριλαμβανομένης της επιτυχίας, της αποτυχίας και των ακραίων περιπτώσεων.
Παγκόσμιες Παρατηρήσεις για την Υλοποίηση
Κατά την υλοποίηση του experimental_useActionState σε εφαρμογές που απευθύνονται σε παγκόσμιο κοινό, λάβετε υπόψη τα ακόλουθα:
- Τοπικοποίηση (Localization): Βεβαιωθείτε ότι όλα τα μηνύματα σφάλματος και επιτυχίας είναι σωστά τοπικοποιημένα για διαφορετικές γλώσσες και περιοχές. Χρησιμοποιήστε βιβλιοθήκες διεθνοποίησης (i18n) για τη διαχείριση των μεταφράσεων.
- Ζώνες Ώρας: Να είστε προσεκτικοί με τις ζώνες ώρας όταν εμφανίζετε ημερομηνίες και ώρες σε χρήστες σε διαφορετικές τοποθεσίες. Χρησιμοποιήστε κατάλληλες βιβλιοθήκες μορφοποίησης ημερομηνιών που χειρίζονται τις μετατροπές ζωνών ώρας.
- Μορφοποίηση Νομίσματος: Μορφοποιήστε τις τιμές νομισμάτων σύμφωνα με την τοπική ρύθμιση του χρήστη. Χρησιμοποιήστε βιβλιοθήκες μορφοποίησης νομισμάτων που χειρίζονται διαφορετικά σύμβολα νομισμάτων και δεκαδικούς διαχωριστές.
- Καθυστέρηση Δικτύου: Να γνωρίζετε τα πιθανά ζητήματα καθυστέρησης δικτύου κατά την αλληλεπίδραση με χρήστες σε διαφορετικές περιοχές. Χρησιμοποιήστε τεχνικές όπως οι αισιόδοξες ενημερώσεις και τα δίκτυα διανομής περιεχομένου (CDN) για τη βελτίωση της απόδοσης.
- Απόρρητο Δεδομένων: Συμμορφωθείτε με τους κανονισμούς περί απορρήτου δεδομένων σε διάφορες χώρες, όπως ο GDPR στην Ευρώπη και ο CCPA στην Καλιφόρνια. Λάβετε τη συγκατάθεση των χρηστών πριν από τη συλλογή και επεξεργασία των προσωπικών τους δεδομένων.
- Προσβασιμότητα: Βεβαιωθείτε ότι η εφαρμογή σας είναι προσβάσιμη σε χρήστες με αναπηρίες, ανεξάρτητα από την τοποθεσία τους. Ακολουθήστε τις οδηγίες προσβασιμότητας όπως το WCAG για να κάνετε την εφαρμογή σας πιο συμπεριληπτική.
- Υποστήριξη Δεξιά-προς-Αριστερά (RTL): Εάν η εφαρμογή σας υποστηρίζει γλώσσες που γράφονται από δεξιά προς τα αριστερά (π.χ., Αραβικά, Εβραϊκά), βεβαιωθείτε ότι η διάταξη και η μορφοποίησή σας είναι σωστά προσαρμοσμένες για περιβάλλοντα RTL.
- Παγκόσμιο CDN (Δίκτυο Διανομής Περιεχομένου): Χρησιμοποιήστε ένα Παγκόσμιο CDN για την εξυπηρέτηση στατικών πόρων (εικόνες, CSS, JavaScript) από διακομιστές που βρίσκονται φυσικά πιο κοντά στους χρήστες σας. Αυτό μπορεί να βελτιώσει σημαντικά τους χρόνους φόρτωσης και να μειώσει την καθυστέρηση για χρήστες σε όλο τον κόσμο.
Συμπέρασμα
Το experimental_useActionState hook προσφέρει μια ισχυρή και κομψή λύση για τη διαχείριση της κατάστασης ενεργειών σε εφαρμογές React. Απλοποιώντας τη διαχείριση της κατάστασης, βελτιώνοντας την αναγνωσιμότητα του κώδικα και ενισχύοντας την εμπειρία του χρήστη, δίνει τη δυνατότητα στους προγραμματιστές να δημιουργούν πιο στιβαρές και συντηρήσιμες εφαρμογές. Αν και είναι κρίσιμο να γνωρίζουμε τον πειραματικό του χαρακτήρα, τα πιθανά οφέλη του experimental_useActionState το καθιστούν ένα πολύτιμο εργαλείο για κάθε προγραμματιστή React. Λαμβάνοντας υπόψη παγκόσμιους παράγοντες όπως η τοπικοποίηση, οι ζώνες ώρας και η καθυστέρηση δικτύου, μπορείτε να αξιοποιήσετε το experimental_useActionState για να δημιουργήσετε πραγματικά παγκόσμιες εφαρμογές που παρέχουν μια απρόσκοπτη εμπειρία για χρήστες σε όλο τον κόσμο. Καθώς το React συνεχίζει να εξελίσσεται, η εξερεύνηση και η υιοθέτηση αυτών των καινοτόμων χαρακτηριστικών θα είναι απαραίτητη για τη δημιουργία σύγχρονων, αποδοτικών και φιλικών προς τον χρήστη web εφαρμογών. Λάβετε υπόψη τα ποικίλα υπόβαθρα και τις συνθήκες δικτύου της παγκόσμιας βάσης χρηστών σας κατά την υλοποίηση αυτής, και οποιασδήποτε, τεχνολογίας.